<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
		*{
			font: 16px "微软雅黑";
			/* 去掉无序列表样式针对一切列表项标记 */
			text-decoration: none;
			/* 去掉无序列表样式 针对三项
			①列表项标记 list-style-type
		    ②列表项位置 list-style-position
			③列表项图片 list-style-image
			 */
			list-style: none;
			margin: 0;
			padding: 0;
		}
			aside{
						width: 400px;
						height: 514px;
						background: #949494;
						/* 盒子模型 外边距 */
						margin: 0px 250px;
						}
								.ul_sidebar{
						list-style-type: none;
					}
						aside ul.ul_sidebar li {
						width: 250px;
						height: 46px;
						text-align: left;
						line-height: 46px;
						color: #ffffff;
						float: left;
						position: relative;
						top: 25px;
					}
					
						aside ul.ul_sidebar li:hover{
						background: #fe8729;
					}
					
		/* 挂靠位【活动】使用绝对定位，按照父级位置定位 */
		aside ul.ul_sidebar div.out{
			width: 400px;
			height: 513px;
			background: pink;
			/* 绝对定位 */
			position: absolute;
			left: 435px;
			display: none;
			z-index: 1;
		}
		
		
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构：外层div .sidebar
		              内层ul.ul_sidebar li*10
					  内容参照京东左栏第一个
			css结构：内部引入方式
					  通配选择器--合理添加
					  外层div.sidebar 235*460 背景
					  内层每个li加宽高 235*46
					  内层文本垂直居中对齐 文字：16px
					  鼠标移动上去li，
					  背景色改变
		 -->
		 
		<aside>
			<ul class="ul_sidebar">
				<div class="out"></div>
				<li>手机&nbsp;平板 电话卡<span>></span></li>
				<li>电脑&nbsp;盒子<span>></span></li>
				<li>路由器&nbsp;智能硬件<span>></span></li>
				<li>移动电源&nbsp;插线板<span>></span></li>
				<li>耳机&nbsp;音箱<span>></span></li>
				<li>电池&nbsp;存储卡<span>></span></li>
				<li>保护套&nbsp;后盖<span>></span></li>
				<li>贴膜&nbsp;其他配件<span>></span></li>
				<li>米兔&nbsp;服装<span>></span></li>
				<li>箱包&nbsp;其他周边<span>></span></li>
			</ul>
		</aside>
		
	<script>
		/* 左栏实现:1.添加事件 li 2.切换效果 3.切换效果 */
		$("aside ul.ul_sidebar li").hover(function(){
			//弹出框 默认 隐藏 抓弹出框 第一件事 显示
			$("aside ul.ul_sidebar div.out").css("display","block");
		},function(){
			$("aside ul.ul_sidebar div.out").css("display","none");
		});
	</script>
	
	</body>
	
</html>

<!-- css悬停效果   效果不能实现:  不能切换
     jq 悬停效果事件源    hover   切换效果问题
	 语法:$("选择器").hover(function(){第一件事},function(){第二件事});
 -->